<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <style>
        .big {
            background-color: antiquewhite;
            height: 200px;
            width: 300px;
        }

        .small {
            background-color: blue;
            height: 50px;
            width: 50px;
        }
    </style>
</head>

<body>
    <div id="id">
        <span>{{num}}</span>
        <button @click="add(10)">点我+10</button>
        <button @mouseover="add1(30)">鼠标经过我+30</button>
        <a href="http://www.baidu.com" @click.prevennt>跳转百度</a>
        <a href="http://www.baidu.com" @click.once>跳转百度</a>
        <div class="big" @click="big()">
            <!-- 阻止冒泡发生在事件后.stop -->
            <div class="small" @click.stop="small()">

            </div>
        </div>
        <input type="text" @keydown="getVlaue($event)">
        <!-- 解析HTML -->
        <div v-html="tag"></div>
        <!-- 解析文本 -->
        <div v-text="txt"></div>


    </div>
    <script>
        new Vue({
            data(){
                return {
                    num: 20,
                    txt: '啊是电饭锅',
                    tag: `<h1>我是一级标题!!!</h1>`

                }
            },

            methods: {
                add(e) {
                    this.num += e

                },
                add1(e) {
                    this.num += e

                },
                big() {
                    console.log('大的被点击了');

                },
                small() {
                    console.log("小的被剪辑了");

                },
                getVlaue(event) {
                    if (event.code==="KeyW") {
                        console.log("111111111111111");
                        
                        
                    }
                    if (event.keyCode===13) {
                        console.log("发送消息");
                        
                        
                    }

                }

            },
        }).$mount('#id')   //通过原形挂载
    </script>
</body>

</html>